<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% String path=request.getContextPath(); String basePath=request.getScheme()+ "://" + request.getServerName() + ":" + request.getServerPort() + path+ "/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<title>激活卡定义新增</title>


<%@ include file="/WEB-INF/jsp/common/common.jsp"%>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.divbox.js" type="text/javascript"></script>

<style type="text/css">
.input_text {
	width: 250px;
}

.select_1 {
	width: 250px;
}

input.fieldError {
	border: 1px solid #ffb042;
	background-color: #fffbf5;
}

textarea.fieldError {
	border: 1px solid #ffb042;
	background-color: #fffbf5;
}

label.fieldError {
	line-height: 23px;
	color: #ffb042;
	padding-left: 6px;
}

.img-wrapper {
	min-height: 250px;
	border: 1px solid #ccc;
	width: 90%;
	margin-top: 20px;
	background: #fff;
}

.img-item {
	position: relative;
	width: 200px;
	height: 200px;
	border: 1px solid #ccc;
	overflow: hidden;
	float: left;
	margin: 20px 0 0 40px;
}

.img-item span {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	color: #fff;
	background: rgba(62, 64, 65, 0.7);
	cursor: pointer;
	display: none;
}

.img-item:hover span {
	display: block;
}
.img_prompt {
	color: red;
	font-size: 12px;
}
</style>
<script type="text/javascript">
//获取url中的参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}
//-------------------- init---------------------------
function init() {
	/* 查询编辑数据 */
	if (getUrlParam('id')) {
		queryCard({templatid: getUrlParam('id')})
		$('.add_link').html('编辑')
		// 方案不可改 lfd added 20181009
		$('#searchProdBtn').hide()
		// 编辑去掉重置按钮 lfd added 20181009
		$('#reset').hide()
	}
}
// 编辑
function queryCard(param){
	$.openLoading();
	$.ajax({
		url : "actirationCard/query",
		type : 'POST',
		async : true,
		data:param,
		dataType:'json',
		success:function(data){
			$.closeLoading();
			if (data.image) {
				$('#preview').html('<img  width="500" height="300" src="data:image/jpeg;base64,' + data.image +'" />')
			}
			//var arr=data.limitDays.split("~")
			$('#name').val(data.name);
			$('#benefitTerm').val(data.benefitTerm);
			$('#modalPremamtPp').val(data.modalPremamtPp)
			$('#pricelessType').val(data.pricelessType)
			//$('#tip').val(data.tip)
			$('#comment').val(data.comment)
			//$('#cTerms').val(data.cTerms)
			$('#prodName').val(data.planName)
			$('#prodCode').val(data.planNo)
			//$('#limitDayBegin').val(arr[0])
			//$('#limitDayEnd').val(arr[1])
			/* $('#activePp').val(data.activePp) */
			//$('#insuredCount').val(data.insuredCount)
			//$('#maxOccupLevel').val(data.occupationLevel);
			$('#typeCode').val(data.typeCode)
			if(data.cVocherType!=null){
				$("#cVocherType").append("<option value="+data.cVocherType+">"+data.cVocherType+"</option>")
			}
			$('#pricelessType').attr("disabled",true).css('background-color', '#ccc')
			$('#modalPremamtPp').attr("disabled",true).css('background-color', '#ccc')
			// 新增说明书名称 20190225
			$('#manualName').val(data.manualName)
		}
	});
}
$(function () {
	/* 激活卡类型选择 start */
	$('#pricelessType').change(function () {
		if ($(this).val() === '0') {
			$('#cVocherType').attr("disabled",false).css('background-color', 'transparent')
		} else {
			$('#cVocherType').attr("disabled",true).css('background-color', '#ccc')
		}
	})
	/* 激活卡类型选择 end */
	init()//如果为编辑，查询数据
})
//-------------------- init---------------------------
/* 选择高亮 */
function bindradio(){
	$("input[name='radioNlifeProd']").click(function(){
		$("input[name='radioNlifeProd']").parent().parent().removeClass("table_highlighter");
		$(this).parent().parent().addClass("table_highlighter");
   	});
}

/* ---------出单产品弹窗----------  */
//关闭 选择产品 弹出层
function closeNlifeProdDiv(){
	$("#nlifeProdDiv").CloseDiv();	
	$('#prodCode_choose').val("");
	$('#prodName_choose').val("");
	$('#startDateBegin').val("");
	$('#startDateEnd').val("");
}
//点击"请选择(产品)" 弹出产品选择层
function openNlifeProdDiv(){
	if ($('#typeCode').val() !== '3') {
		$.message("error", "不为新意健险激活卡，系统暂不支持！");
        return;
	}
	//加载第一页产品信息
	queryNlifeProd(1);
}

//加载产品信息前，拼接参数
function queryNlifeProd(pageIndex){
	var size = 8;
	var planNo = $.trim($('#prodCode_choose').val());
	var planName = $.trim($('#prodName_choose').val());
	var DateReg = /^(\d{4})\-(\d{2})\-(\d{2})$/;
	var startDateBegin = $.trim($('#startDateBegin').val());
	var startDateEnd = $.trim($('#startDateEnd').val());
	var sflag = DateReg.test(startDateBegin);
	var eflag = DateReg.test(startDateEnd);
	if(null != startDateBegin && "" != startDateBegin){
		if(!sflag){
			$.message("error", "您输入的定义起期格式不正确，格式为：YYYY-MM-DD。请重新选择日期");
			$('#startDateBegin').val('');
			return;
		}
	}
	if(null != startDateEnd && "" != startDateEnd){
		if(!eflag){
			$.message("error", "您输入的定义止期格式不正确，格式为：YYYY-MM-DD。请重新选择日期");
			$('#startDateEnd').val('');
			return;
		}
	}
	loadNlifeProd({size:size,current:pageIndex,planNo:planNo,planName:planName,startDateBegin:startDateBegin,startDateEnd:startDateEnd});
}

//根据传入的参数，加载相应的产品
function loadNlifeProd(param){
	$.openLoading();
	$.ajax({
		url : "actirationCard/queryNlifePlanPageByCriteriaForCard",
		type : 'POST',
		async : true,
		data:param,
		dataType:'json',
		success:function(page){
			$.closeLoading();
			if($.validate(page))return;

			var radioObj ="<input class='input_fxk' name='radioNlifeProd' type='radio'/>";
			var fieldNames = "planNo,planName";
			var tableContent = creatTable1(fieldNames,page,radioObj);
			var tableObj = $("#nlifeProdTable");
			tableObj.find("tbody").remove();
			tableObj.append(tableContent);
			
			var strPage = creatChannelPage(param.current,6,page.maxPage,"43");
			var pageDIV = $("#nlifeProdPageDIV");
			pageDIV[0].innerHTML="";
			pageDIV.append(strPage);
			
			$("#nlifeProdDiv").OpenDiv();

			bindradio();
		}
	});
}
//点击“确定”按钮，选择产品
function chooseNlifeProd(){
	var selected = $("input[name='radioNlifeProd']:checked");
	if(selected.length==0){
		$.message("error", "请选择一个方案！");
		return;
	}
	var prodCode = selected.parent().parent().children(" td:eq(1)").html();
	$('#prodCode').val(prodCode);
	var prodName = selected.parent().parent().children(" td:eq(2)").html();
	$('#prodName').val(prodName);
	closeNlifeProdDiv();
}
/* ---------出单产品弹窗----------  */
/* ---------新增保存模板---------- */
/* 预览图片 */
function preview(file) {
	if (file.files && file.files[0]) {
		var reader = new FileReader()
		reader.onload = function (e) {
			$('#preview').html('<img  width="500" height="300" src="' + e.target.result +'" />')
		}
		reader.readAsDataURL(file.files[0])
	} else {
		$('#preview').html('<div class = "img_prompt"> 您的浏览器不支持图片预览，请升级为高版本，或者更换为Chrome浏览器。</div>')
		//file.select();
		//解决ie报拒绝访问的问题
        // parent.document.body.focus();
        //获取图片真实地址
        // if (document.selection) 
        // var src = document.selection.createRange().text || file.value;
       	/* src = src.replace(/\\/g, '/') */
        // document.selection.empty();
        /* $('#preview').html('<img id="img" width="500" height="300" src="' + 'file://localhost/'+ src +'" />') */
        // $('#img').css('dispaly', 'block')
        // $('#preview').html('<div class = "img"></div>')
		// $('#preview').css({"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+ src + "')"})
	}
}
//调用拼接参数的方法，并执行保存
function saveActirationCard(){
	//var beginDay=$('#limitDayBegin').val();
	//var endDay=$('#limitDayEnd').val();
		var name = $('#name').val();
		var benefitTerm = $('#benefitTerm').val();
		var modalPremamtPp = $('#modalPremamtPp').val();
		var pricelessType = $('#pricelessType').val();
		//var cTerms = $('#cTerms').val();
		var comment = $('#comment').val();
		/* var activePp = $('#activePp').val(); */
		//var insuredCount = $('#insuredCount').val();
		//var occupationLevel= $('#maxOccupLevel').val();
		//var tip = $('#tip').val();
		//var limitDays=beginDay+"~"+endDay;
		var cVocherType=$("#cVocherType").val();
		var planNo = $('#prodCode').val();
		var typeCode = $('#typeCode').val()
		
		// 新增说明书名称 20190224
		var manualName = $('#manualName').val()
		
		if (!name) {
			$.message("error", "请输入正确的激活卡定义名称！");
			return 
		} else if (!benefitTerm) {
			$.message("error", "请输入正确的激活卡有效期！");
			return 
		} else if (!modalPremamtPp) {
			$.message("error", "请输入正确的卡单总保费！");
			return 
		} else if (!pricelessType) {
			$.message("error", "请输入正确的激活卡类型！");
			return 
		} else if (typeCode !== '3')  {
			$.message("error", "不为新意健险激活卡，系统暂不支持！！");
            return 
		} else if (!cVocherType  && pricelessType == '0') {
			$.message("error", "请输入正确的单证类型！");
			return 
		} else if (!planNo) {
			$.message("error", "请输入正确的方案号！");
			return
		}
		/* else if(!activePp){
			$.message("error", "每人激活份数不能为空");
			return
		} */
		// activePp: 1
		
		var preParam = {id: getUrlParam('id'),name: name, benefitTerm: benefitTerm, modalPremamtPp: modalPremamtPp, pricelessType: pricelessType, comment: comment, planNo: planNo,cVocherType:cVocherType, typeCode: typeCode, manualName: manualName}
		// 描述更新bug lfd changed 20181009 start
		// 去除 undefined
		var param = {}
		for (key in preParam) {
			if (preParam[key] || preParam[key] === "") {
			// if (preParam[key]) {
				param[key] = preParam[key]
			}
		}
		// 描述更新bug lfd changed 20181009 end
		saveAndupdate(param)// 保存更新 */
	
}
/* 保存更新 */
function saveAndupdate(params) {
	var url
	if (params.id) {
		url = 'update'
	} else {
		url = 'add'
	}
	$.openLoading();
	$.ajaxFileUpload({
		url : "actirationCard/" + url,
		type : 'POST',
		async : true,
		fileElementId:'fileupload',
		data: params,
		dataType:'json',
		success:function(data){
			$.closeLoading();
			if("success"==data.result&&""!=data.message){
				self.location.href="<%=path%>/actirationCard/difinition";
				$.message("success", data.message);
			}
			if("fail"==data.result){
	    		$.message("error", "系统错误,请联系管理员");
	    	}
			if("error"==data.result&&""!=data.message){
	    		$.message("error", data.message);
	    	}
		},
		error: function (err) {
			$.message("error", "系统错误,请联系管理员");
		}
	})
}
/* ---------保存更新模板---------- */
//统一 关闭  窗口
function closeCurrentDIV(obj){
	$("#"+obj).CloseDiv();
}

//根据激活卡类型选择单证类型
function documentType(value){
	if(value!=0){
		$("#cVocherType").empty();
	}else{
		$("#cVocherType").append("<option value='PH0002' selected='selected'>PH0002</option>");
	}
}
// 重置按钮
function resetForm() {
	// 编辑去掉重置按钮 lfd changed 20181009 
	// if (!getUrlParam('id')) {
		// 新增
		$('#modalPremamtPp').val('')
		$('#pricelessType').val('')
		$('#preview').html('')
		$('#cVocherType').empty()
	// 编辑去掉重置按钮 lfd changed 20181009 
	// }
	$('#name').val('')
	$('#benefitTerm').val('12')
	$('#prodName').val('')
	$('#prodCode').val('')
	//$('#maxOccupLevel').val('')
	//$('#limitDayBegin').val('1')
	//$('#limitDayEnd').val('30')
	$('#fileupload').val('')
	//$('#cTerms').val('')
	//$('#tip').val('')
	/* $('#pricelessType').find("option[value = '"+1+"']").attr("selected","selected"); */
	$('#comment').val('')
	$('#cVocherType').attr("disabled",true).css('background-color', '#ccc')
	/* $('#activePp').val('1') */
	var Y='Y';
	//$('#insuredCount').val('1');
}
</script>
<style type="text/css">
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat
}
</style>
</head>
<body>
	<div class="current">
		<table class="current_table_1">
			<tbody>
				<tr class="f2">
					<td><img src="./images/current_1.jpg"></td>
					<td class="current_table_1_td"><img src="images/current_1.png">&nbsp;您现在的位置：&nbsp;
						<span style="color: #136bab;">激活卡管理 <span
							style="padding: 0 5px; font-weight: bold; line-height: 28px;">&gt;</span>激活卡定义
							<span
							style="padding: 0 5px; font-weight: bold; line-height: 28px;">&gt;</span>
							<i style="font-style: normal;" class="add_link">新增</i>
					</span></td>
					<td><img src="./images/current_3.jpg"></td>
				</tr>
			</tbody>
		</table>
	</div>

	<form id="inputForm">
		<table class="table_05">
			<tbody>
				<tr>
					<td colspan="4"
						style="font-size: 12px; font-weight: bold; text-align: left; color: #3876bf; line-height: 17px; background-image: url(images/centent_1.jpg)">激活卡定义新增</td>
				</tr>
				<tr>
					<th width="25%">卡定义名称：</th>
					<td width="25%"><input name="name" id="name" type="text"
						class="input_text" onkeyup="value=value.replace(/[%_]/g, '')"><span class="red">*</span></td>
					<th width="25%">卡有效期限（月）：</th>
					<td width="25%"><input id="benefitTerm" type="text"
						class="input_text" type="number" maxlength="20" value = "12" onkeyup="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'')"><span
						class="red">*</span></td>
				</tr>
				<tr>
					<th width="25%">卡单总保费：</th>
					<td width="25%"><input name="modalPremamtPp"
						id="modalPremamtPp" type="text" class="input_text" title="只能为数字" onkeyup="value=value.replace(/[^\d^\.]/g, '')"><span
						class="red">*</span></td>
					<th width="25%">卡类型：</th>
					<td width="25%"><select onchange="documentType(this.options[this.options.selectedIndex].value)" name="pricelessType" id="pricelessType"
						class="select_1" style="visibility: visible;">
							<option value="">--请选择--</option>
							<option value="0">有价激活卡</option>
							<option value="1">非有价激活卡</option>
					</select> <span class="red">*</span></td>
				</tr>
				<tr>
                    <th>单证类型：</th>
                    <td><select id="cVocherType" class="select_1"
                        style="background-color: #ccc; visibility: visible;" disabled>
                    
                    </select><span class="red">*</span></td>
                    <th>险种：</th>
                    <td><select id="typeCode" class="select_1"
                        style="background-color: #ccc; visibility: visible;" disabled>
                        <option value="3" selectd>新意健险激活卡</option>
                    </select><span class="red">*</span></td>
                </tr>
				<tr>
					<th width="10%">方案名称：</th>
					<td width="40%"><input name="prodName" id="prodName"
						type="text" readonly="readonly" style="background-color: #ccc;"
						class="input_text"><span class="red">*</span>&nbsp; <input
						type="button" class="input_button_2" id="searchProdBtn"
						value="请选择" onClick="openNlifeProdDiv()" /></td>
					<th width="10%">方案代码：</th>
					<td width="40%"><input name="prodCode" id="prodCode"
						type="text" readonly="readonly" style="background-color: #ccc;"
						class="input_text"><span class="red">*</span></td>
				</tr>
				<!-- 说明书名称 20190225 -->
				<tr>
                    <th width="10%">说明书名称：</th>
                    <td width="40%" colspan="3"><input name="manualName" maxlength="30" id="manualName" type="text" class="input_text"><span class="red">请输入说明书的简称，需三十个字符以内的大写字母组合。</span></td>
                </tr>
				<!-- <tr>
					
					<th>被保险人人数：</th>
					<td>
					<input name="insuredCount" id="insuredCount" type="text" onkeyup="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'')"  value="1" maxlength="3" class="input_text" ><span class="red">*</span>
					</td>
				</tr>
				<tr>
					<th>起保延期天数区间：</th>
					<td>
					<input name="limitDayBegin" id="limitDayBegin" type="text" onkeyup="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'')"  value="1" maxlength="3" style="width:50px;height:20px;" >&nbsp;-&nbsp;<input name="limitDayEnd" id="limitDayEnd" type="text" width="10" onkeyup="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'')" value="30" maxlength="3" style="width:50px;height:20px;"><span class="red">*</span>
					</td>
					<th>最长延期天数：</th>
					<td>
					<input name="limitDayEnd" id="limitDayEnd" type="text" width="10" onkeyup="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'')" class="input_text" value="30" maxlength="3"><span class="red">*</span>
					</td>
				</tr> -->
				<tr>
					<th>图片：</th>
					<td colspan="3">
						<!-- 图片上传表单 --> <input type="file" class="file-hook"
						id="fileupload" name="imgfile" onchange = "preview(this)"/> <!-- 图片容器 -->
						<div class="img-wrapper" id="preview">
							
						</div>
						<!-- <span class="red">*</span> -->
					</td>
				</tr>
				<!-- <tr>
					<th>条款：</th>
					<td colspan="3"><textarea name="cTerms" id="cTerms"
							maxlength="50" rows="5" class="textarea_1"></textarea></td>
				</tr>
				<tr>
					<th>投保提示：</th>
					<td colspan="3"><textarea name="tip" id="tip" maxlength="50"
							rows="5" class="textarea_1"></textarea></td>
				</tr> -->
				<tr>
					<th>描述：</th>
					<td colspan="3"><textarea name=comment id="comment"
							maxlength="500" rows="5" class="textarea_1"></textarea></td>
				</tr>
			</tbody>
		</table>
		<div align="center" style="padding-bottom: 10px;">
			<input id="sub" class="input_button_1" name="" type="button"
				value="确定" onclick="saveActirationCard()">&nbsp;&nbsp; <input
				class="input_button_1" name="" id="reset" onclick="resetForm()" type="button"
				value="重置">
		</div>
	</form>

	<!-- begin -------------------------产品 DIV 默认隐藏--------------------------->
	<div id="nlifeProdDiv" style="display: none; width: 80%;">
		<div class="table_title_div">
			<table class="table_title" style='width: 100%; height: 20px;'>
				<tr>
					<td width="10%"></td>
					<td width="80%" id="interfaceName"></td>
					<td width="10%" align="right"><img
						src="./images/closedown.gif" alt="关闭"
						onclick="closeNlifeProdDiv()" /></td>
				</tr>
			</table>
		</div>

		<table class="table_02" align="center">
			<tr>
				<td>
					<table class="search_table">
						<tr height="30px">
							<td style="border: 0px; text-align: right;">方案代码：</td>
							<td style="border: 0px; text-align: left;"><input
								name="txt3" id="prodCode_choose" class="input_text"
								style="width: 120px;"></td>
							<td style="border: 0px; text-align: right;">方案名称：</td>
							<td style="border: 0px; text-align: left;"><input
								name="txt3" id="prodName_choose" class="input_text"
								style="width: 120px;">&nbsp;&nbsp;&nbsp;&nbsp; <input type="button"
								class="input_button_1" id="searchBtn" value="查询"
								onClick="queryNlifeProd(1)" /></td>
						</tr>
						<tr height="30px">
<!-- 							<td style="border: 0px; text-align: right;">定义起期：</td>
							<td style="border: 0px; text-align: left;"><input
								id="startDateBegin" onkeydown="false"
								onclick="showCalendar('startDateBegin','y-mm-dd');$('.calendars').css('z-index',20000);"
								class="input_time" type="text" style="width: 120px;" /></td>
							<td style="border: 0px; text-align: right;">定义止期：</td>
							<td style="border: 0px; text-align: left;"><input
								id="startDateEnd" onkeydown="false"
								onclick="showCalendar('startDateEnd','y-mm-dd');$('.calendars').css('z-index',20000);"
								class="input_time" type="text" style="width: 120px;" />
								&nbsp;&nbsp;&nbsp;&nbsp; <input type="button"
								class="input_button_1" id="searchBtn" value="查询"
								onClick="queryNlifeProd(1)" /></td> -->
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<div style="height: 243px;">
						<table id="nlifeProdTable" class="content_table_1">
							<thead>
								<tr class="f1">
									<th style="width: 5%">选择</th>
									<th style="width: 45%">方案代码</th>
									<th style="width: 50%">方案名称</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
						<div id="nlifeProdPageDIV" class="page"></div>
					</div>
				</td>
			</tr>
		</table>
		<div align="center">
			<input class="input_button_3" type="button"
				onclick="chooseNlifeProd()" value="确定">&nbsp;&nbsp; <input
				class="input_button_3" type="button" onclick="closeNlifeProdDiv()"
				value="取消">
		</div>
	</div>
	<!-- end -------------------------产品 DIV 默认隐藏--------------------------->
	<div id="Loading" style="display:none" align="center">
		<img src="./images/loading.gif" />
	</div>
</body>
</html>